<template>
    <div class="bg">
        <particles></particles>
        <div style="width: 400px;margin: 100px auto">
            <div style="color: white;font-size: 30px;text-align: center;padding: 30px 0">欢迎注册</div>

            <el-form ref="form" :model="form" size="normal" :rules="rules">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.username" clearable=""
                              placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password=""
                              placeholder="请输入密码"></el-input>

                </el-form-item>
                <el-form-item prop="confirm">
                    <el-input prefix-icon="el-icon-lock" v-model="form.confirm" show-password=""
                              placeholder="请再次输入密码"></el-input>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 400px;border-radius: 20px" @keyup.enter.native="register"
                               @click="register">注 册
                    </el-button>
                </el-form-item>
                <div style="display: flex">
                    <el-form-item>
                        <el-button type="primary" style="border-radius: 20px" @click="$router.push('/login')">返回登录
                        </el-button>
                    </el-form-item>

                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Particles from '@/components/particles/index'
    import request from "@/utils/request";

    export default {
        components: {Particles},
        name: "Register",
        data() {
            return {

                form: {
                    username: '',
                    password: '',
                    confirm: ''
                },

                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
                    ],
                    confirm: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
                    ],
                }


            }
        },
        created() {
            let that = this;
            document.onkeydown = function (e) {
                e = window.event || e;
                if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'enter')) {//验证在登录界面和按得键是回车键enter
                    that.login('form');//登录函数
                }
            }
        },
        methods: {

            //登录
            register() {


                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (this.form.password != this.form.confirm) {
                            this.$message({
                                type: "error",
                                message: "两次输入的密码不一致"
                            })
                            return
                        }
                        request.post("/sys/register", this.form).then(res => {
                            console.log(res)
                            if (res.data.code === '0') {
                                this.$message({
                                    type: "success",
                                    message: "注册成功"
                                })
                                //sessionStorage.setItem("user", JSON.stringify(res.data))  // 缓存用户信息
                                this.form = {}
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.data.msg
                                })
                                this.form = {}
                            }
                        })
                    }
                })

            }
        }
    }
</script>

<style>
    .bg {
        background-image: url("../assets/bg.jpg");
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .el-input {

        border-radius: 10px;
    }
</style>


